Getting Started

Thank you for purchasing Grahaprime HTML Template. This documentation will guide you through setup, customization, and deployment. Please read carefully before making modifications.

• Main demo file: homepage-1.html
• Open any HTML file in your browser to preview.
• Edit using a code editor such as Visual Studio Code or Sublime Text.

Requirements

• Text Editor: Visual Studio Code, Sublime Text, or Atom recommended.
• Browsers: Latest versions of Chrome, Firefox, Safari, Edge (IE not supported).
• Hosting: Any hosting supporting static HTML/CSS/JS files.
• Basic Knowledge: HTML, CSS, and JavaScript familiarity for customization.
• Optional Tools: Node.js and npm (if you wish to extend with build tools).

Installation

1. Unzip the package grahaprime.zip.
2. Locate the homepage-1.html file and open it in your browser to verify.
3. Upload all template files to your web server (e.g., public_html/).
4. Ensure assets/ folder remains in the root directory as it contains CSS, JS, and image files.

File Structure

The template contains the following main directories:

    grahaprime/
    ├── homepage-1.html
    ├── homepage-2.html
    ├── homepage-3.html
    ├── about-us.html
    ├── contact.html
    ├── faqs.html
    ├── pricing.html
    ├── our-team.html
    ├── project-style-1.html
    ├── ...
    └── assets/
        ├── css/
        │   ├── style.css
        │   ├── vendor/
        │   └── rtmicons.css
        ├── fonts/
        │   └── fontawesome/
        ├── js/
        │   ├── main.js
        │   └── vendor/
        └── images/

      

• assets/css: All CSS files including Bootstrap, Swiper, and custom styles.
• assets/js: JavaScript files for interactivity.
• assets/img: Image assets used in the demo.
• assets/fonts: Icon fonts and custom fonts.

Customization

• CSS: assets/css/style.css — Override colors, typography, and layout.
• JS: assets/js/main.js — Modify interactive components.
• Images: assets/img/ — Replace placeholders with your own.

Example: Changing Theme Colors

/* style.css */
body { background-color: #ffffff; color: #333333; }
.btn-primary { background:#0066ff; border-color:#0066ff; }

Example: Adding New Navigation Link

<ul class="nav">
  <li><a href="about-us.html">About Us</a></li>
  <li><a href="contact.html">Contact</a></li>
  <li><a href="careers.html">Careers</a></li>
</ul>

Adding New Sections

<section class="section">
  <div class="container">
    <h1>New Section</h1>
  </div>
</section>

Troubleshooting

• CSS/JS not loading: Ensure assets/ folder is uploaded correctly and paths are intact.
• Broken images: Verify relative paths and filenames (case-sensitive on some servers).
• Slider/JS errors: Check script loading order — vendor libraries must load before main.js.
• Contact form not working: This template is static. You need to integrate backend (PHP/mail API) for email functionality.

Tips & Best Practices

Performance Optimization

• Minify and combine CSS/JS files.
• Use optimized images and enable lazy loading.
• Consider using a CDN for faster delivery.

SEO Best Practices

• Use semantic HTML5 elements.
• Add meta descriptions and keywords.
• Generate an XML sitemap.

Accessibility

• Add alt attributes to all images.
• Ensure proper color contrast for text readability.
• Use ARIA labels for navigation and interactive elements.

Deployment Guide

• Shared Hosting: Upload files to the public_html folder.
• Netlify/Vercel: Drag and drop the template folder or connect your Git repository.

Maintenance Tips

• Keep Bootstrap and JS libraries updated.
• Test your website across multiple browsers and devices.

FAQ

Credits & Sources

• jQuery - JavaScript library
• Bootstrap 5 - Responsive grid system
• Swiper.js - Modern touch slider
• fslightbox.js - Fullscreen Lightbox
• RTM Icons - Custom icon set
• Google Fonts - Inter Typeface
• Unsplash / Pexels - Demo images
• Prism.js - Syntax highlighting

Support

If you have any questions, please contact us via our Envato profile page. Support includes bug fixes and guidance on using the template.

Changelog